<template>
  <n-layout>
    <n-layout-header bordered>
      <l-nav></l-nav>
    </n-layout-header>
    <n-layout has-sider>
      <n-layout-sider bordered collapse-mode="width" :collapsed-width="64" :width="200" :collapsed="collapsed"
        show-trigger @collapse="collapsed = true" @expand="collapsed = false">
        <n-menu :options="menuOptions" :collapsed="collapsed" :collapsed-width="64" :collapsed-icon-size="22"
          @update:value="onMenuUpdate"></n-menu>
      </n-layout-sider>

      <n-layout-content content-style="padding: 24px;">
        <router-view />
      </n-layout-content>

    </n-layout>
  </n-layout>
</template>
<script setup>
import { h, ref, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import {
  NMenu,
  NIcon,
  NLayout,
  NLayoutSider,
  NLayoutHeader,
  NLayoutContent,
} from 'naive-ui'


import {
  ApartmentOutlined,
  DatabaseOutlined
} from '@vicons/antd'

import LNav from '../components/Nav.vue'

// 压缩菜单
const collapsed = ref(false)

// 路由
const router = useRouter()

// 菜单图标函数
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

// 菜单切换
function onMenuUpdate(key, item) {
  console.log(`Home.onMenuUpdate => go to ${key}-${item.label}`)
  router.push({ name: key })
}

// 菜单配置
const menuOptions = []

// 数据准备
onBeforeMount(() => {
  const role = sessionStorage.getItem('role')
  if (role === 'admin') {
    menuOptions.push(
      { label: '用户管理', key: 'user', icon: renderIcon(ApartmentOutlined) },
      { label: '连接配置', key: 'link', icon: renderIcon(DatabaseOutlined) }
    )
  } else {
    menuOptions.push(
      { label: '交易统计', key: 'tran', icon: renderIcon(ApartmentOutlined) },
      { label: '任务统计', key: 'task', icon: renderIcon(DatabaseOutlined) }
    )
  }
})
</script>